<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="login.css">
</head>
<body>

<form action="reg.php" method="post">
    <div class="title">
        <h3>注册</h3> <a href="index.html" class="re-btn">登陆</a>
    </div>

    <div class="list">
        <label for="email">E-mail：</label>
        <input type="text" id="email" name="email" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}"
               placeholder="请输入邮箱" title="请输入正确的邮箱格式">
    </div>
    <div class="list">
        <label for="ma">邮箱验证码：</label>
        <div class="maBox">
            <input type="text" name="emailMa" id="ma" pattern="[\d]{4}" title="请输入4位数验证码">
            <img src="" alt="" class="imgMa">
        </div>
    </div>
    <div class="list">
        <label for="username">昵称：</label>
        <input type="text" name="username" id="username" pattern="[A-Za-z\-\u4e00-\u9fa5]{2,6}"
               placeholder="请输入英文或中文名字"  title="请输入不少于俩个字,不多于六个字的用户名">
    </div>
    <div class="list">
        <label for="password">密码：</label>
        <input type="password" name="pwd" id="password" pattern="[\d]{6,12}" placeholder="请输入密码"
               title="请输入不少于6位数字,不多于12个位数字的密码" >
    </div>
    <div class="list">
        <label for="password2">确认密码：</label>
        <input type="password" name="pwd2" id="password2" pattern="[\d]{6，12}" placeholder="请输入重复密码"
        title="请输入重复密码">
    </div>

    <button type="submit" class="login" id="regBtn">注册</button>


</form>

<script src="login.js"></script>
<script>
    addLoadEvent(reg);
    function reg() {
        var regBtn = getId("#regBtn"),
            username = getId("#username"),
            pwd = getId("#password"),
            pwd2 = getId("#password2"),
            emailMa = getId("#ma"),
            email = getId("#email");
        regBtn.onclick=function(){
            if (emailMa.value === "") {
                alert("邮箱不能为空");
                return false;
            } else if (email.value === "") {
                alert("验证码不能为空");
                return false;
            }else if (username.value === "") {
                alert("用户名不能为空");
                return false;
            } else if (pwd.value === "") {
                alert("密码不能为空");
                return false;
            } else if (pwd2.value === "") {
                alert("用户名不能为空");
                return false;
            }else if (pwd.value !== pwd2.value) {
                alert("两次密码不一致");
                return false;
            }
        }
    }

</script>
</body>
</html>